<template>
    <div>
        <van-nav-bar
                title="路线"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
        />
        <button @click="dw1()">驾车</button>
        <button @click="dw2()">公交</button>
        <button @click="dw3()">步行</button>
        <button @click="dw4()">骑行</button>
    </div>
    <div id="container" style="height: 500px;width: 100%"></div>
    <div id="result"></div>
    <div style="color: red">注意：请贴合实际选择路线，跨省市没有公交！！</div>
</template>
<script>
    import { Toast } from 'vant';
    export default {
        name: "map",
        data() {
            return {
               x: 0,
               y: 0,
                lng:0,
                lat:0,
            }
        },
        mounted() {
            var name=this.$route.query.name;

            if(name!=null){
                this.axios.get("/api/foods/map.do?name="+name).then(res=>{
                    if(res.data.code==200){
                        this.x=res.data.data[0].longitude;
                        this.y=res.data.data[0].latitude;
                       // alert(this.x)
                    }
                });
            }
            var map = new BMapGL.Map("container");
            var point = new BMapGL.Point(113.63141921,34.75343885);
            var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
            map.addControl(scaleCtrl);
            var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
            map.addControl(zoomCtrl);
            var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
            map.addControl(cityCtrl);
            var location = new BMapGL.LocationControl();
            map.addControl(location);//定位

            map.centerAndZoom(point,12);
            map.enableScrollWheelZoom(true);
            /*浏览器定位为*/
            var geolocation = new BMapGL.Geolocation();
            var that = this;
            /*geolocation.getCurrentPosition(function(r){
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    var mk = new BMapGL.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);*/
                    //alert('您的位置：' + r.point.lng + ',' + r.point.lat);
                    //113.63141921,34.75343885
                   /* that.x=r.point.lng;
                    that.y=r.point.lat;*/
            geolocation.enableSDKLocation();
            geolocation.getCurrentPosition(function(r){
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    var mk = new BMapGL.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);
                   // alert('您的位置：' + r.point.lng + ',' + r.point.lat);
                    that.lng= r.point.lng;
                   that.lat= r.point.lat;
                var point = new BMapGL.Point(113.63141921,34.75343885);
                    // 创建点坐标
                    map.centerAndZoom(point, 15);
                    // 初始化地图，设置中心点坐标和地图级别
                    map.enableScrollWheelZoom(true);
                    var p1 = new BMapGL.Point(r.point.lng,r.point.lat);
                    var p2 = new BMapGL.Point(that.x,that.y);
                    var driving = new BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
                    driving.search(p1, p2);
                }
            });
            const toast = Toast.loading({
                message: '请稍等，加载中...',
                forbidClick: true,
                loadingType: 'spinner',
                duration: 0,

            });

            let second = 12;
            const timer = setInterval(() => {
                second--;
                if (second) {

                    toast.message
                } else {
                    clearInterval(timer);
                    Toast.clear();
                }
            }, 1000);
        },
        methods:{

           dw1() {
               var map = new BMapGL.Map("container");
               map.centerAndZoom(new BMapGL.Point(113.63141921,34.75343885), 15);
               map.enableScrollWheelZoom(true);
               var p1 = new BMapGL.Point(this.lng,this.lat);
               var p2 = new BMapGL.Point(this.x, this.y);

               var driving = new BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
               driving.search(p1, p2);

           },
            dw2() {
                var map = new BMapGL.Map('container');
                map.centerAndZoom(new BMapGL.Point(113.63141921,34.75343885), 15);
                var output = '从上地到西单坐公交需要：';
                var transit = new BMapGL.TransitRoute(map,{
                    renderOptions: {map: map},
                    onSearchComplete: function(results){
                        if (transit.getStatus() != BMAP_STATUS_SUCCESS){
                            return ;
                        }
                        var plan = results.getPlan(0);
                        output += '总时长：' + plan.getDuration(true);  //获取时间
                        output += '总路程：' + plan.getDistance(true);  //获取距离
                       // $('#result').css('display','block');
                       // $('#result').html(output);
                    },
                });/*
                var start=new BMapGL.Point(113.63141921,34.75343885);
                var end=new BMapGL.Point(113.65, 34.72);*/

                var p1 = new BMapGL.Point(this.lng,this.lat);
                var p2 = new BMapGL.Point(this.x, this.y);
                transit.search(start, end);
            },
            dw3() {
               var map = new BMapGL.Map("container");
               var loc= new BMapGL.Point(113.63141921,34.75343885);
                 map.centerAndZoom(loc, 15);
                map.enableScrollWheelZoom(true);

                var p2 = new BMapGL.Point(this.x, this.y);

                var walking = new BMapGL.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
                walking.search(loc, p2);
            },
            dw4() {
                var map = new BMapGL.Map("container");
                map.centerAndZoom(new BMapGL.Point(113.63141921,34.75343885), 15);
                map.enableScrollWheelZoom(true);
                var p1 = new BMapGL.Point(this.lng,this.lat);
                var p2 = new BMapGL.Point(this.x, this.y);

                var ridingRoute = new BMapGL.RidingRoute(map, {renderOptions:{map: map, autoViewport: true}});
                ridingRoute.search(p1, p2);
            },
            onClickLeft(){
                history.back();
            }
        }

    };

</script>
<style type="text/css">
    html{height:100%}
    body{height:100%;margin:0px;padding:0px}
    #container{height:100%}
</style>

